<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Delete, Plus, Search,Refresh,EditPen } from '@element-plus/icons-vue'
import http from '@/http'
import type { ComponentSize } from 'element-plus'
import { formatDate } from '@/utils/dateFormatter';//引入全局日期格式化工具

// 表格数据
const tableData = ref([])

// 当前页
const PageNum = ref(1)
// 显示数据
const pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
//总条数
const total=ref(0)
// 查询的条件
let name=ref('')
let gid=ref('')
// 其他支付数据
 let zhifu=ref([])
//每页条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value=val
  getPage();
}
//分页页码
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  PageNum.value=val
  getPage();
}
  // 查询分页的方法
  function  getPage(){
 //发送post请求获取当前页的消息
 http.get("/chargelist/getPage", {
        params: {
            pageNum: PageNum.value,
            pageSize: pageSize.value,
            name: name.value,
            gid:gid.value
        }}).then((res)=>{
        console.log("成功")
        tableData.value=res.list;
        total.value=res.total
       console.log(res)
    }).catch(()=>{ 
        console.log("失败")
    })
  }
// 窗体加载事件
onMounted(() => {
  getPage();
   // 从字典表中获取
   http.post("/docharge/getzhifufs").then((res)=>{
      console.log(res)
      zhifu.value=res
    })
})
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const gridData = ref([])
// 查看详细
let chakanxx=(orderId)=>{
  // 打开模态框

  http.post("/chargelist/getxiangxi",{orderId:orderId}).then((res)=>{
    dialogTableVisible.value=true
    console.log(res)
    gridData.value=res
  })
}
</script>

<template>
  <el-row>
    <el-col :span="24">
      <!-- 内容 -->
       <!-- 头部搜索 -->
        挂号单号： <el-input v-model="gid" style="width: 240px" placeholder="输入挂号单号" /> 
        患者姓名： <el-input v-model="name" style="width: 240px" placeholder="输入患者姓名" />
        <el-button :icon="Search" @click="getPage()" type="primary">查询</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="orderId" label="订单号" width="220" />
    <el-table-column prop="regId" label="挂号单号" width="220" />
    <el-table-column prop="patientName" label="患者姓名"  width="100"/>
    <el-table-column prop="orderAmount" label="总金额" width="100" />
    <el-table-column prop="payType" label="支付类型" width="90" >
      <template #default="scope"> {{ scope.row.payType==0?"现金":"支付宝" }}</template>
    </el-table-column>

    <el-table-column prop="orderStatus" label="订单状态" width="100">
      <!-- 订单状态 0 未支付 1 支付成功 2 支付超时 3 支付失败 -->
      <template #default="scope">
        {{ scope.row.orderStatus==0?"未支付":"" }}
        {{ scope.row.orderStatus==1?"支付成功":"" }}
        {{ scope.row.orderStatus==2?"支付超时":"" }}
        {{ scope.row.orderStatus==3?"支付失败":"" }}
      </template> 
    </el-table-column>   
    <el-table-column property="createTime" label="创建时间" width="200" >
        <template #default="scope">{{formatDate( scope.row.createTime,'YYYY年MM月DD日 HH:mm' )}}</template>
        </el-table-column>

        <el-table-column v-if="orderStatus!=0" property="address" label="操作" width="150" show-overflow-tooltip>
      <template   #default="scope">
        <el-button :icon="EditPen" type="success" @click="chakanxx(scope.row.orderId)"  plain>查看详细</el-button>
      </template>
      </el-table-column>

      <el-table-column v-if="orderStatus==0" property="address" label="操作" width="" show-overflow-tooltip>
   <template #default="scope" width="240">
        <el-button :icon="EditPen" type="success" @click="chakanxx(scope.row.deptId)"  plain>查看详细</el-button>
        <el-button type="danger"  @click="confirmClick(x)" plain>现金收费</el-button>
        <el-button type="danger"  v-for="x in zhifu" :key="x.dictValue" @click="confirmClick(x)" plain>{{ x.dictLabel }}收费</el-button>
           </template>
        </el-table-column>
  </el-table>

  <!-- 分页 -->
      <el-pagination
        v-model:current-page="PageNum"
        v-model:page-size="pageSize"
        :page-sizes="[1,2,3,4,5]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" 
      />
    </el-col>
  </el-row>
  <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
    <el-table :data="gridData">
      <el-table-column property="coId" prop="coId" label="处方编号" width="150" />
      <el-table-column property="itemName" prop="itemName" label="项目名称" width="100" />
      <el-table-column property="address" prop="itemPrice" label="项目价格" />
      <el-table-column property="address" prop="itemNum" label="项目数量" />
      <el-table-column property="address" prop="itemAmount" label="小计" />
      <el-table-column property="address" prop="orderId" label="订单编号" />
      <el-table-column property="address" prop="itemType" label="项目类型" >
        <template #default="scope">
          {{ scope.row.itemType==0?"药品":"检查项" }}</template>
      </el-table-column>
      <el-table-column property="address" prop="status" label="状态" />
    </el-table>
  </el-dialog>
</template>

<style scoped>

</style>
